<template>
  <div class="edit-item">
    <div class="use-item-wrap">
      <div class="use-item">
        <div class="use-item-name">{{ data.name }}</div>
        <img :src="data.img" alt="" class="use-item-img" v-if="data.img" />
      </div>
      <div class="use-item-controls">
        <DragOutlined class="drag-icon" />
        <SwapOutlined class="swap-icon" @click="onSwap" />
        <CloseCircleOutlined class="delete-icon" @click="onDelete" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import {
  SwapOutlined,
  DragOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  name: "EditItem",
  components: { SwapOutlined, DragOutlined, CloseCircleOutlined },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    index: {
      type: [Number, String],
      default: 0,
    },
    side: {
      type: String,
      default: "left",
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({});

    const init = () => {
      console.log(props);
    };

    init();

    const onSwap = () => {
      context.emit("onAdd", props.side, props.index, "swap");
    };

    const onDelete = () => {
      context.emit("onDelete", props.side, props.index);
    };

    return {
      ...toRefs(state),
      onSwap,
      onDelete,
    };
  },
});
</script>

<style lang="less" scoped>
.edit-item {
  width: 100%;
  height: 100%;

  .use-item-wrap {
    width: 100%;
    height: 100%;
    position: relative;

    .use-item {
      width: 100%;
      height: 100%;
      padding-bottom: 1rem;

      .use-item-name {
        width: 100%;
        height: 3.8rem;
        display: flex;
        align-items: center;
        color: #fff;
        padding-right: 10rem;
      }

      .use-item-img {
        width: 100%;
        height: calc(100% - 3.8rem);
        object-fit: cover;
      }
    }

    .use-item-controls {
      position: absolute;
      top: 0.5rem;
      right: 0;
      background-color: rgba(199, 199, 199, 0.6);
      padding: 0.4rem 1rem;
      border: 1px solid #ccc;
      border-radius: 0.4rem;
      display: flex;
      align-items: center;

      .drag-icon {
        border: 1px solid #f1f1f1;
        border-radius: 50%;
        font-size: 1.2rem;
        padding: 0.2rem;
        cursor: move;
        color: #fff;
      }

      .swap-icon {
        margin-left: 0.8rem;
        border: 1px solid #f1f1f1;
        border-radius: 50%;
        font-size: 1.2rem;
        padding: 0.2rem;
        cursor: pointer;
      }

      .delete-icon {
        color: #f14f51;
        margin-left: 0.8rem;
        font-size: 1.8rem;
        cursor: pointer;
      }
    }
  }
}
</style>
